<template>
  <div class="table-page-search-box">
    <a-form layout="inline">
      <a-row :gutter="24">
        <a-col :md="8" :sm="24">
          <a-form-item label="订单编号">
            <a-input v-model="queryParam.order_no" allowClear placeholder="请输入订单号"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="推广代理">
            <a-input v-model="queryParam.admin_name" allowClear placeholder="请输入订单号"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="店铺名称">
            <a-input v-model="queryParam.store_name" allowClear placeholder="请输入订单号"></a-input>
          </a-form-item>
        </a-col>

        <a-col :md="8" :sm="24">
          <a-form-item label="订单日期">
            <a-range-picker
              format="YYYY-MM-DD HH:mm"
              valueFormat="YYYY-MM-DD HH:mm"
              :placeholder="['开始时间', '结束时间']"
              v-model="queryTime"
              @change="changeTime"
            />
          </a-form-item>
        </a-col>

        <a-col :md="8" :sm="24">
          <a-form-item label="订单金额">
            <div class="select">
              <a-input-number
                placeholder="最小金额"
                v-model="queryParam.min_money"
                :min="0"
                :precision="2"
              ></a-input-number>
              <span style="margin: 0 5px">~</span>
              <a-input-number
                placeholder="最大金额"
                v-model="queryParam.max_money"
                :min="0"
                :precision="2"
              ></a-input-number>
              <a-button type="primary" @click="search">查询</a-button>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParam: {
        order_no: '',
        start_time: '',
        end_time: '',
        admin_name: '',
        store_name: '',
        min_money: '',
        max_money: '',
      },
      queryTime: [],
    }
  },
  methods: {
    // 切换筛选时间
    changeTime(e) {
      if (e.length) {
        this.queryParam.start_time = e[0]
        this.queryParam.end_time = e[1]
      } else {
        this.queryParam.start_time = ''
        this.queryParam.end_time = ''
      }
    },
    // 点击重置参数
    reset() {
      this.queryParam = {
        order_no: '',
        start_time: '',
        end_time: '',
        admin_name: '',
        store_name: '',
        min_money: '',
        max_money: '',
      }
      this.queryTime = []
    },
    // 点击查询
    search() {
      this.$emit('search', this.queryParam)
    },
  },
}
</script>

<style lang="less" scoped>
.searchBox {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 12px;
  align-items: center;
  max-width: 1500px;
  .searchItem {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    margin-right: 20px;
    .label {
      white-space: nowrap;
      margin-right: 10px;
      width: 70px;
      text-align: left;
    }
  }
  .search-input {
    width: 320px;
  }
}
</style>
